<template>
  <div class="q-pa-md">

    <div class="q-gutter-y-md column" style="max-width: 500px" >
      <q-input color="purple-12" v-model="userId" label="请输入你的id" ref="input" :rules="[val => !!val || '请输入userid']">
        <template v-slot:prepend>
          <q-icon name="event" />
        </template>
        <template v-slot:after>
          <q-btn color="secondary" label="查询" @click="initData" />
        </template>
      </q-input>

    </div>

    <q-carousel
      arrows
      animated
      v-model="slide"
      height="700px"
      prev-icon="arrow_left"
      next-icon="arrow_right"
      control-type="regular"
      control-color="purple"
    >
      <q-carousel-slide :name="index"  :img-src="require('src/assets/fruit.png')" v-for="(item,index) in advice" :key="index" >
        <div class="absolute-bottom custom-caption">
          <div class="text-h2" >{{item.userName}}</div>
          <div class="text-subtitle1">评价：{{item.advice}}</div>
          <div class="text-id">订单编号：{{item.orderId}}</div>
          <div class="text-date">{{item.time}}</div>
          <el-rate v-model="item.pleased"></el-rate>
        </div>
      </q-carousel-slide>

    </q-carousel>
  </div>
</template>
<script>
  import * as advice from 'src/api/advice'
  export default {
    data () {
      return {
        slide: 0,
        advice: [],
        userId: ''
      }
    },
    methods: {
      initData(){
        const that = this
        if(this.userId.length!==0){
          advice.getUserAdvice(this.userId).then(function (response) {
            if(response.data.code ===200){
              that.advice = response.data.data
              console.log(that.advice)
              that.$message.success("查询成功")
            }else{
              that.$message.error("查询失败")
            }
          })
        }


      }
    },
    created() {
    }
  }
</script>

<style lang="sass" scoped>
  .custom-caption
    text-align: center
    padding: 12px
    color: white
    background-color: rgba(0, 0, 0, .3)

</style>
